<template>
    <div>
      <div class="btnTop"  v-if="btnFlag"  @click="backTop()">
        <div class="tops"><van-icon name="back-top" size="30px"/></div>
      </div>
      <!-- <div class="tops"><van-icon name="back-top" size="25px"/></div> -->
         <!-- <div class="you">优惠</div>  -->
        <youhuiheader></youhuiheader>
                <router-view></router-view>
    </div>
</template>
<script>
import youhuiheader from './youhuis/youhuiheader'
import Vue from 'vue'
import { Icon } from 'vant'

Vue.use(Icon)
export default {
  components: {
    youhuiheader
  },
  data () {
    return {
      btnFlag: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    scrollToTop () {
      const that = this
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 200) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  }
  // ,mounted () {
  //   http({
  //     url: '/heihei/api/union/product/elite/elite_list?c=h5&s=20000&t=1605095863875&v=1.0'

  //   }).then(res => {
  //     console.log(res.data)
  //   })
  // }

}
</script>
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
    ul{
        list-style: none;
    }
    body,html{
        height:100%;
    }
    .you{
      text-align: center;
      height: 50px;
      line-height:50px;
      font-size: 17px;
      border-bottom: 1px solid rgb(245, 245, 245);
    }
    .btnTop{
      text-align: center;
    }
    .tops{
     background: #ccc;
     color: white;
      position: fixed;
      right: 20px;
      bottom: 100px;
      z-index: 1000;
      width: 50px;
      height: 50px;
      border-radius: 50%;

      display: flex;
    justify-content: center;
    align-items: center;

    }
</style>
